<template>
  <div class="comment">
    <!-- <h2>评论</h2> -->
    <div class="ping">
      <img
        class="avatar"
        :src="dalImg(userInfo.avatar)"
        alt=""
        style="
          width: 12vw;
          height: 12vw;
          display: inline-block;
          border-radius: 12vw;
        "
      />
      <input
        type="text"
        placeholder="有感而发..."
        v-model="pinglun"
        class="comments"
      />
      <Button
        round
        type="primary"
        size="normal"
        @click="toComment(product.id)"
      >
        发送
      </Button>
    </div>
    <div
      v-for="item in comments"
      class="item"
    >
      <img
        class="avatar"
        :src="dalImg(item.uavatar)"
        alt=""
        style="width: 10vw; height: 10vw; border-radius: 10vw"
      />
      <p style="flex: 1">
        <span>{{ item.unickname }}</span>
        <span>{{ item.content }}</span>
      </p>
      <p>
        <icon
          name="good-job-o"
          @click="like"
        />
      </p>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { conDetailAPI,commentsAPI, loadDetailAPI} from "../services/auth";
import { Icon,Button } from "vant";
import { stringify } from "qs";
import { loadUserInfoAPI } from "../services/shop";
import { dalImg } from "../utils/tools";
const route = useRoute(); // 获取路由中的参数
const router = useRouter();
const product = ref({}); // 数据
const userInfo = ref({});
const condetails = ref([]);
const comments = ref(""); // 数据
const content = ref("");
const pinglun =ref("");
const loadPro = async () => {
  const data = await loadDetailAPI(route.query.id);
  console.log(data);
  product.value = data.data;
};
const loadData = async () => {
  console.log(route.query.id);
  const res = await conDetailAPI(route.query.id);
  console.log(res);
  comments.value = res.data;
  console.log(comments.value);
};
//个人信息
loadUserInfoAPI().then((res) => {
  userInfo.value = res.data;
});
loadPro();
loadData();
// conDetailAPI().then((res) => (condetails.value = res.data));
const like = () => {
  alert("点赞成功");
};
//发布评论
const toComment = (id) => {
  console.log(1);
  if (pinglun.value) {
    commentsAPI(
      stringify({
        uPid: id,
        content: pinglun.value,
      })
    ).then((res) => {
      console.log(res);
      loadData();
      pinglun.value='';
    });
  } else {
    alert("请输入内容");
  }
};
</script>
<style scoped>
.item {
  width: 90%;
  height: 60px;
  border-bottom: 1px solid #cecece;
  display: flex;
  margin-top: 1rem;
  margin-left: 1rem;
}
.item p {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 1rem;
}
.item p span {
  display: block;
}
.ping {
  padding: 0 10px;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.ping input {
  border: none;
  flex: 1;
  border-radius: 30px 30px;
  height: 40px;
  background-color: rgba(128, 128, 128, 0.659);
  margin: 0 5px;
}
.comments{
  text-indent: 1rem;
}
</style>
